<template>
  <Fieldset legend="Form Field" :toggleable="true">
    <section class="grid grid-cols-4 mb-3 gap-2">
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.background" label="BG" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.color" label="Color" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.iconColor" label="Icon Color" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.shadow" label="Shadow" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.borderColor" label="Border Color" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.hoverBorderColor" label="Hover Border Color" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.focusBorderColor" label="Focus Border Color" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField
          v-model="colorScheme.formField.invalidBorderColor"
          label="Invalid Border Color"
          type="color"
        />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.disabledBackground" label="Disabled BG" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.disabledColor" label="Disabled Color" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.placeholderColor" label="Placeholder" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField
          v-model="colorScheme.formField.invalidPlaceholderColor"
          label="Invalid Placeholder"
          type="color"
        />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.filledBackground" label="Filled BG" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.filledHoverBackground" label="Filled Hover BG" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.filledFocusBackground" label="Filled Focus BG" type="color" />
      </div>
      <div class="flex flex-col gap-1"></div>
    </section>

    <div class="mb-1 text-sm font-semibold text-surface-950 dark:text-surface-0">Float Label</div>
    <section class="grid grid-cols-4 gap-2">
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.floatLabelColor" label="Color" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.floatLabelFocusColor" label="Focus Color" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.floatLabelActiveColor" label="Active Color" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="colorScheme.formField.floatLabelInvalidColor" label="Invalid Color" type="color" />
      </div>
    </section>
  </Fieldset>
</template>

<script setup lang="ts">
  import { inject, type Ref } from 'vue'
  import DesignTokenField from '../../base/DesignTokenField.vue'

  interface FormField {
    background: string
    color: string
    iconColor: string
    shadow: string
    borderColor: string
    hoverBorderColor: string
    focusBorderColor: string
    invalidBorderColor: string
    disabledBackground: string
    disabledColor: string
    placeholderColor: string
    invalidPlaceholderColor: string
    filledBackground: string
    filledHoverBackground: string
    filledFocusBackground: string
    floatLabelColor: string
    floatLabelFocusColor: string
    floatLabelActiveColor: string
    floatLabelInvalidColor: string
  }

  interface ColorScheme {
    formField: FormField
    value: any
  }

  const colorScheme = inject('$colorScheme') as Ref<ColorScheme>
</script>
